<template>
  <div>
    <ul>
      <li>{{'组件里面的值：'+ msg}}</li>
      <van-checkbox v-model="showDialog" @change="change">复选框</van-checkbox>
      <button @click="fn2">里面改变外面</button>
    </ul>
  </div>
</template>

<script>
import {
  Icon,
  Popup,
  Button,
  Cell,
  CellGroup,
  Checkbox,
  RadioGroup,
  CountDown
} from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [RadioGroup.name]: RadioGroup,
    [CountDown.name]: CountDown
  },
  model: {
    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
    prop: 'showPayment',
    event: 'close'
  },
  props: {
    showPayment: false
  },
  computed: {
    showDialog: {
      get: function () {
        return this.showPayment
      },
      set: function (value) {
        this.$emit('close', value)
      }
    }
  },
  methods: {
    change (v) {
      console.log(v)
    },
    fn2 () {
      // this.$emit('close', !this.msg)
    }
  }
}
</script>
